React 팁 — 요소 및 캐싱 값

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다.

이 기사에서는 React 앱을 개발하는 데 도움이 되는 흔하지 않은 다양한 기능을 살펴보겠습니다.

문자열로 React 요소 만들기

JSX 대신 문자열로 React 요소를 참조할 수 있습니다. HTML 요소는 JSX 대신 문자열로 작성할 수 있습니다.

예를 들어 다음 코드를 작성할 수 있습니다.

import React from "react";

const Component = "div";

export default function App() {
  return <Component className="App">hello</Component>;
}

위의 코드에서 Component를 'div'로 설정했습니다. 이는 Component가 div 요소임을 의미합니다. 번거로움 없이 Component 의 요소 태그를 동적으로 변경할 수 있기 때문에 좋습니다.

예를 들어 다음과 같이 div와 p 사이를 전환하는 토글을 만들 수 있습니다.

import React from "react";

export default function App() {
  const [Component, setComponent] = React.useState("div");
  return (
    <>
      <button
        onClick={() =>
          setComponent(Component => (Component === "div" ? "p" : "div"))
        }
      >
        Toggle Tag
      </button>
      <Component className="App">hello</Component>
    </>
  );
}

위의 코드에는 Component 태그를 div와 p 사이에서 토글하는 버튼이 있습니다.

따라서 버튼을 클릭하면 Component 태그가 버튼을 클릭할 때 div와 p 사이에서 전환되는 것을 볼 수 있습니다.

이전 값 유지

useRef 후크를 사용하여 prop 또는 state의 이전 값을 유지할 수 있습니다.

예를 들어 다음과 같이 상태의 이전 값과 새 값을 유지할 수 있습니다.

import React from "react";

export default function App() {
  const [name, setName] = React.useState("bob");
  const prevNameRef = React.useRef("");

  React.useEffect(() => {
    prevNameRef.current = name;
  }, [name]);

  const prevName = prevNameRef.current;

  return (
    <div>
      <button
        onClick={() => setName(name => (name === "bob" ? "jane" : "bob"))}
      >
        Toggle Name
      </button>
      <p>Current name:</p>
      <p>{name}</p>
      <p>Previous name:</p>
      <p>{prevName}</p>
    </div>
  );
}

위의 코드에는 name 상태와 setName 값을 설정하는 name 함수가 있습니다.

그런 다음 버튼에서 클릭하면 setName 함수를 호출합니다. 'bob'와 'jane' 사이를 전환합니다.
useEffect 후크에서 name 의 값을 관찰합니다. 이 값은 원래 값을 유지하기 위해 prevNameRef.current를 name로 설정합니다. 그런 다음 prevNameRef.current를 prevName로 설정하여 return 문에서 내용을 짧게 유지합니다.

결국 반환된 JSX에 이전 값과 새 값이 표시되는 것을 볼 수 있습니다.

유연한 Non-Stale 값 확인을 위해 React.useRef 사용

구성 요소가 로드될 때 일부 데이터가 로드되었는지 확인하는 한 가지 방법은 useRef 후크를 사용하여 데이터 조각이 로드되었는지 여부를 추적하는 것입니다.

예를 들어 다음 코드를 작성하여 이를 수행할 수 있습니다.

import React from "react";

export default function App() {
  const [name, setName] = React.useState("");
  const loaded = React.useRef(false);

  React.useEffect(() => {
    if (!loaded.current) {
      setName("bob");
    }
    loaded.current = true;
    return () => (loaded.current = false);
  });

  return <div>{name}</div>;
}

위의 코드에서 useEffect가 loaded.current인지 확인하는 true 콜백을 확인합니다. 그렇지 않은 경우 setName를 호출하여 name 상태 값을 설정합니다.
useEffect 콜백에는 다음도 있습니다.

return () => (loaded.current = false);

loaded.current가 언로드될 때 false를 App로 재설정합니다.

따라서 구성 요소가 'bob'이라는 이름으로 로드되는 것을 볼 수 있습니다.

useMemo 후크로 값을 메모화합니다.

useMemo 후크를 사용하여 메모화된 값을 생성할 수도 있습니다. 즉, 해당 값이나 종속성이 변경되지 않는 한 캐시됩니다.
useMemo는 렌더링하는 동안 실행됩니다. 따라서 렌더링 중에 하지 않을 작업을 실행해서는 안 됩니다.

성능 최적화로 사용되지만 나중에 변경될 수 있으므로 값의 무결성을 보장하지 않습니다.

예를 들어 다음과 같이 사용할 수 있습니다.

import React from "react";

export default function App() {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");
  const name = React.useMemo(() => `${firstName} ${lastName}`, [
    firstName,
    lastName
  ]);

  return (
    <div>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      <input value={lastName} onChange={e => setLastName(e.target.value)} />
      <p>{name}</p>
    </div>
  );
}

위의 코드에서는 useMemo를 사용하여 firstName와 lastName의 값을 관찰한 다음 2를 결합하여 새로운 값name을 도출했습니다.

그런 다음 입력에 텍스트를 입력하면 name  의 값이 업데이트되는 것을 볼 수 있습니다. 그러나 firstName 또는 lastName가 변경되지 않으면 기존 값을 캐시합니다.

결론

useRef 및 useMemo 후크를 사용하여 데이터를 캐시할 수 있습니다. 또한 문자열을 사용하여 HTML 요소를 만들 수 있습니다. 이는 HTML 요소를 동적으로 렌더링할 수 있음을 의미합니다.